<template>
	<div class="allcontainer" v-loading="loading">
		<div class="h2">参加的学生组织</div>
		<div class="bg-white">
			<div class="table">
				<el-table stripe ref="singleTable" :data="ClubList" highlight-current-row style="width: 100%">
					<el-table-column prop="Name" label="名称" min-width="100" fixed="left"></el-table-column>
					<!-- <el-table-column prop="PorjectName" label="项目" min-width="100"></el-table-column> -->
					<el-table-column prop="TypeName" label="类型" min-width="100" align="center"></el-table-column>
					<el-table-column prop="DpeartName" label="学院" min-width="120" align="center"></el-table-column>
					<el-table-column prop="IsEnable" label="操作" width="188">
						<template slot-scope="scope">
							<div class="user-btn user-btn-auto">
								<span class="activity" @click="JoinActivity(scope.row)">活动</span>
								<span class="notice" @click="Notice(scope.row)">公告</span>
								<span class="exit" @click="ExitClub(scope.row)">退出</span>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		GetJoinClubList,
		DoOutClub
	} from '@/api/follow';
	import addActivity from './addActivity.vue';
	import Cache from '@/utils/cache';
	export default {
		components: {
			addActivity
		},
		data() {
			return {
				form: this.$form.createForm(this, {
					name: 'advanced_search'
				}),
				pagination: {
					currentPage: 1,
					pageSize: this.global.pageSize,
					pageSizeOptions: this.global.pageSizeOptions, // 每页中显示的数据
					showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
				},
				ClubList: [],
				showModal: false,
				loading: false
			};
		},
		created() {
			this.getList();
		},
		computed: {},
		methods: {
			handleSearch(e) {
				e.preventDefault();
				this.form.validateFields((error, values) => {
					this.pagination.currentPage = 1;
					this.values = values;
					this.getList();
				});
			},
			handleReset() {
				this.form.resetFields();
				this.values = {};
				this.getList();
			},
			JoinActivity(text) {
				this.$router.push({
					name: 'UserJoinActivity',
					query: {
						ID: text.ID,
						ChairmanNo: text.ChargeUserNo,
						Name: text.Name
					}
				});
			},
			Notice(text) {
				this.$router.push({
					name: 'NoticeJoin',
					query: {
						Name: text.Name,
						ID: text.ID,
						ChairmanNo: text.ChargeUserNo
					}
				});
			},
			async getList() {
				this.loading = true;
				let data = {};
				let res = await GetJoinClubList(data);
				this.ClubList = res.data.data;
				this.loading = false;
			},
			ExitClub(text) {
				let that = this;
				this.$confirm({
					title: '提示',
					content: `您确定退出该学生组织吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {};
						data.id = text.ID;
						let res = await DoOutClub(data);
						if (res.data.code == 0) {
							that.getList();
							that.$message.success(res.data.msg);
						} else {
							that.$message.error(res.data.msg);
						}
					}
				});
			},
			closeFun(index) {
				this.showModal = false;
				if (index === 1) {
					this.showModal != this.showModal;
					this.getList();
				}
			},
		}
	};
</script>

